<template>
	<view>
		<u-popup  v-model="jishow" mode="bottom" width="100%" ref="auth" :mask-close-able="false" :custom="true" :mask-click="false" @close="closejifen">
            <view class="popone">
                <!-- <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" /> -->
                <view class="phonenav">
                    
                    <view class="jigou">
                        <view class="cha" @click="closejifen">
                            <image class="icon_gbcha" src="/static/img/icon_gb_bs.png" mode="" />
                        </view>
                        <view class="jiview">
                            <text class="jiname">积分购买</text>
                            <text class="jimiao">当前余额{{integral||0}}积分</text>
                        </view>
                    </view>
                    <view class="jinav">
                        <view class="jilist">
                            <view class="jiitem" :class="payinfo.id==item.id?'jactive':''" v-for="(item,index) in paylist" :key="index" @click="getpay(item)">
                                <view class="jiitems">
                                    <image class="img_xz_s" src="/static/img/img_xz_s.png" mode="" />
                                    <view class="jinei">
                                        <image class="icon_jf" src="/static/img/icon_jf.png" mode="" />
                                        <text class="jinum"> {{item.score}}积分 </text>
                                        <text class="jinums">￥{{ item.money }}</text>
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view class="zhifang">
                            <text class="zname">支付方式</text>
                            <view class="zhilist">
                                <view class="zhiitem">
                                    

                                    <image class="icon_wzf " src="/static/img/icon_wzf.png" mode="" />
                                    <text class="weiname">微信支付</text>

                                    <image class="icon_xz_s ml" src="/static/img/icon_xz_s.png" mode="" />
                                </view>
                            </view>
                        </view>
                        <view class="tyi" @click.stop="checked=!checked">
                            <image class="tyiicon" src="/static/img/icon_xz_s.png" mode="" v-if="checked" />
                            <image class="tyiicon" src="/static/img/icon_xz_n.png" mode="" v-if="!checked" />
                            <text class="tyinam">支付即代表阅读并同意<text class="tyinams" @click.stop="getxieyi()">《积分购买服务协议》</text></text>
                        </view>
                        
                    </view>
                    <view class="baidi">
                        <view class="querenbtn" @click="getqueren">确认协议并支付</view>
                    </view>
                    
                </view>
            </view>
        </u-popup>
	</view>
</template>

<script>
	export default {
		name: 'PayPop',
		props: {
			jishow: {
				type: Boolean,
				default: false
			},
            integral:{
                type:Number/String
            }

		},
		data() {
			return {
                checked:true,
                paylist:[],
                payinfo:{}
			};
		},
		created() {
			
		},
		mounted() {
            this.getpaylist()
		},
		methods: {
            async getpaylist(){
				let res = await this.$u.api.getBuyParams({
				});
                console.log(res)
                this.paylist = res.list
                this.payinfo = res.list[0]
			},
            closejifen(){
                this.$emit("closejifen")
            },
            getpay(item){
                this.payinfo = item
            },
            async getqueren(){
                if(!this.checked){
                    this.$u.toast("请先勾选协议");
                    return;
                }
                let resd = await this.$u.api.addOrder({
                    id: this.payinfo.id
				});
                console.log(resd)
                let res = await this.$u.api.getRechangePay({
                    order_id: resd.order_id
				});
                console.log(resd)
                uni.requestPayment({
                    appId: res.appid,
                    nonceStr: res.nonceStr,
                    package: res.package,
                    paySign: res.paySign,
                    signType: res.signType,
                    timeStamp: res.timeStamp,
                    success: (e) => {
                        console.log(e)
                        // this.GetUserBaseInfo()
                        // this.gethuiyuan()
                        // this.navrouter("/pages_subject/twoPage/XieYiDetail?id="+this.id);
                        // uni.switchTab({ url: '/pages/tabbar/Tabhome' })
                        // this.paySuccess();
                        // this.$u.toast("支付成功");
                        uni.showToast({
                            title: '支付成功',
                            icon: 'success',
                            duration: 2500,
                        })
                        this.$emit("paysucess");
                    },
                    fail: (e) => {
                        console.log(e)
                        this.$u.toast("支付失败");
                        // uni.switchTab({ url: '/pages/tabbar/my' })
                        // uni.showModal({
                        //     content: "支付失败,原因为: " + e.errMsg,
                        //     showCancel: false
                        // })
                    }
                })

                
                // this.$emit("paysucess") ;//支付成功
            },
            getxieyi(){
                this.navrouter("/pages/my/yhXieyi?key=jfgmxy");
            }

		}
	};
</script>

<style lang="scss" scoped>
    /deep/.u-drawer-bottom{
        background-color: transparent;
    }
    .yaone{
        display: flex;
        flex-direction: row;
        padding: 0 40rpx 40rpx ;
        .yaleft{
            display: flex;
            flex-direction: column;
            width: 70%;
            .yahead{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 30rpx;
                .lingname{
                    font-weight: bold;
                    font-size: 36rpx;
                    color: #111111;
                    display: inline-block;
                    margin-right: 20rpx;
                }
            }
            .lone{
                display: flex;
                flex-direction: row;
                align-items: center;
                // margin-top: 30rpx;
                margin-bottom: 10rpx;
                .shu{
                    width: 40rpx;
                    height: 40rpx;
                    background: #FF5F40;
                    border-radius: 50%;
                    display: inline-block;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    margin-right: 10rpx;
                }
                .ltxt{
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #333333;
                }
                .bzhang{
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: flex-start;
                    max-width: 86%;
                }
                .ltxtmiao{
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #999999;
                    display: inline-block;
                }
            }
        }
    }
    .img_bz{
        margin-left: auto;
        width:136rpx;
        height: 185rpx;
    }
    .gonglist{
        max-height: 800rpx;
        margin: 30rpx 0;
        .gongitem{
            background: #FFFFFF;
            border-radius: 30rpx;
            margin: 0 0 20rpx;
            padding: 30rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            .gleft{
                display: flex;
                flex-direction: column;
                .gname{
                    font-weight: 800;
                    font-size: 36rpx;
                    color: #111111;
                }
                .gmiao{
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #999999;
                    max-width: 80%;
                    display: block;
                    margin-top: 10rpx;
                }
            }
            .quan{
                margin-left: auto;
                width: 38rpx;
                height: 38rpx;
            }
        }
    }
    .toubtn{
        height: 90rpx;
        background: linear-gradient(90deg, #FF8F39, #FF4D43);
        border-radius: 45rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
        width: 100%;
    }
	.popone{
        width: 100%;
        background: #F5F5F5;
        border-radius: 30rpx 30rpx 0rpx 0rpx;
        // height: 530rpx;
        .bg{
            position: absolute;
            width: 100%;
            height: 300rpx;
            border-radius: 30rpx 30rpx 0 0 ;
        }
        .icon_gbcha{
            width: 40rpx;
            height: 40rpx;
            margin-left: auto;
            position: absolute;
            right: 30rpx;
            top: 30rpx;
        }
        .yuedu{
            height: 80rpx;
            display: flex;
            padding: 0 30rpx;
            align-items: center;
            .icon_xz_n{
                width: 36rpx;
                height: 36rpx;
                margin-right: 8rpx;
            }
            .xy{
                font-weight: 500;
                font-size: 20rpx;
                color: #999999;
                display: block;
                width: 90%;
            }
            .xyhu{
                color: rgba(234, 89, 24, 1);
            }
        }
        .kaolv{
            font-weight: bold;
            font-size: 28rpx;
            color: #666666;
            display: block;
            text-align: center;
            margin-top: 20rpx;
        }
        .jigou{
            background: linear-gradient(90deg, #FF8F39, #FF4D43);
            border-radius: 30rpx 30rpx 0rpx 0rpx;
            padding: 30rpx 30rpx 60rpx;
            position: relative;
            .cha{
                // position: absolute;
                // right: 30rpx;
                // top: 30rpx;

            }
            .jiview{
                display: flex;
                flex-direction: row;
                align-items: center;
                .jiname{
                    font-weight: bold;
                    font-size: 44rpx;
                    color: #FFFFFF;
                }
                .jimiao{
                    font-weight: 400;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    display: inline-block;
                    margin-left: 10rpx;
                }
            }
        }
        .jinav{
            background: #F5F5F5;
            border-radius: 30rpx 30rpx 0rpx 0rpx;
            padding: 50rpx 30rpx;
            margin-top: -30rpx;
            position: relative;
        }
        .jilist{
            
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .jiitem{
                width: 33.33%;
                padding: 0 10rpx;
                margin-bottom: 20rpx;
                .jiitems{
                    width: 100%;
                    height: 195rpx;
                    background-color: #fff;
                    border-radius: 20rpx;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    position: relative;
                    .img_xz_s{
                        position: absolute;
                        width: 100%;
                        height: 100%;
                        display: none;
                    }
                    .jinei{
                        position: relative;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;
                        position: relative;
                    }
                    .icon_jf{
                        width: 48rpx;
                        height: 48rpx;
                        margin-bottom: 5rpx;
                    }
                    .jinum{
                        font-weight: bold;
                        font-size: 32rpx;
                        color: #171F48;
                        display: block;
                        margin: 5rpx 0;
                    }
                    .jinums{
                        font-weight: 500;
                        font-size: 28rpx;
                        color: #333333;
                    }
                }
            }
            .jactive{
                .jiitems{
                    .img_xz_s{
                        display: inline-block;
                    }
                }
            }
        }
        .zhifang{
            display: flex;
            flex-direction: column;
            margin: 30rpx 0;
            .zname{
                font-weight: 500;
                font-size: 28rpx;
                color: #333333;
                display: block;
                margin-bottom: 20rpx;
            }
            .zhilist{
                display: flex;
                flex-direction: row;
                .zhiitem{
                    margin-right: 20rpx;
                    padding: 20rpx 30rpx;
                    width: 100%;
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    background: #FFFFFF;
                    border-radius: 10rpx;
                }
                .icon_wzf{
                    width: 36rpx;
                    height: 36rpx;
                    margin-right: 8rpx;
                }
                .icon_xz_s{
                    width: 44rpx;
                    height: 44rpx;
                    // margin-right: 30rpx;
                }
                .weiname{
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #222222;
                }
            }
        }
        .tyi{
            display: flex;
            flex-direction: row;
            align-items: center;
            .tyiicon{
                width: 30rpx;
                height: 30rpx;
                margin-right: 5rpx;
            }
            .tyinam{
                font-weight: 500;
                font-size: 22rpx;
                color: #999999;
            }
            .tyinams{
                color: rgba(0, 170, 238, 1);
            }
        }
        .baidi{
            background-color: #fff;
            padding: 20rpx;
        }
        .querenbtn{
            width: 100%;
            background: linear-gradient(90deg, #FF8F39, #FF4D43);
            border-radius: 49rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 32rpx;
            color: #FFFFFF;
            height: 98rpx;
            
        }
        .phonenav{
            position: relative;
            // margin: 30rpx;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            // align-items: center;
            // padding: 40rpx 30rpx;
            .img_aq{
                width: 173rpx;
                height: 211rpx;
                margin-bottom: 20rpx;
            }
            .jiename{
                font-weight: bold;
                font-size: 36rpx;
                color: #111111;
                display: block;
                text-align: center;
                margin: 40rpx auto;
            }
            .queren{
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                display: block;
                margin: 40rpx 0 80rpx;
            }
            .chaka{
                padding: 30rpx;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #F6F7F9;
                border-radius: 16rpx;
                margin: 25rpx 0;
                .chaname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #111111;
                }
                .phonenum{
                    display: block;
                    font-weight: bold;
                    font-size: 50rpx;
                    color: #F06047;
                    margin: 10rpx 0;
                }
                .xiugai{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .noben{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .xiu{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #F06047;
                        display: inline-block;
                        margin-left: 6rpx;
                    }
                }
            }
            .dianbtn{
                height: 90rpx;
                background: linear-gradient(90deg, #FF8F39, #FF4D43);
                border-radius: 45rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin-top: 20rpx;
                .bm{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                }
                .bmmaio{
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #FFFFFF;
                }
            }
        }
    }
    .fuwu{
        background: #FFFFFF;
        border-radius: 30rpx 30rpx 0rpx 0rpx;
        margin-top: -30rpx;
        position: relative;
        padding: 30rpx;
        .fuone{
            display: flex;
            flex-direction: row;
            align-items: center;
            .funame{
                font-weight: 800;
                font-size: 32rpx;
                color: #111111;
            }
            .cheng{
                background: #E9FFEB;
                border-radius: 6rpx;
                padding: 4rpx 20rpx;
                margin-left: 14rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                .bzhang{
                    width: 24rpx;
                    height: 24rpx;
                    margin-right: 8rpx;
                }
                text{
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #16B925;
                }
            }
            .geng{
                margin-left: auto;
                display: flex;
                flex-direction: row;
                align-items: center;
                text{
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #999999;
                }
                .icon_xgs{
                    width: 24rpx;
                    height: 24rpx;
                    margin-left: 10rpx;
                }
            }
        }
        .fulist{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin: 30rpx 0 20rpx;
            .fuitem{
                width: 160rpx;
                height: 130rpx;
                background: #F6F7F9;
                border-radius: 20rpx;
                margin: 0 15rpx 15rpx 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: relative;
                .bgfu{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    display: none;
                }
                .fuwen{
                    position: relative;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .wnum{
                        font-weight: bold;
                        font-size: 36rpx;
                        color: #111111;
                    }
                    .wnummiao{
                        font-weight: 400;
                        font-size: 20rpx;
                        color: #111111;
                    }
                }
            }
            .factive{
                .bgfu{
                    display: inline-block;
                }
                .fuwen{
                    .wnum{
                        color: #16B925;
                    }
                    .wnummiao{
                        color: #16B925;
                    }
                }
            }
        }
        .yishuo{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 40rpx;
            .yiitem{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-right: 10rpx;
            }
            .icon_zs{
                width: 28rpx;
                margin-right: 3rpx;
                height: 28rpx;
            }
            .yiname{
                font-weight: 500;
                font-size: 26rpx;
                color: #999999;
            }
            .yitxt{
                font-weight: 500;
                font-size: 26rpx;
                color: #16B925;
            }

        }
    }
    .tougong{
        display: flex;
        flex-direction: column;
        margin-bottom: 80rpx;
        .touname{
            font-weight: 800;
            font-size: 32rpx;
            color: #111111;
            display: block;
            margin-bottom: 20rpx;
        }
        .gzlist{
            display: flex;
            flex-direction: row;
            padding: 30rpx 30rpx;
            background: #F5F5F5;
            border-radius: 10rpx;
            align-items: center;
        }
        .icon_xgs{
            width: 24rpx;
            height: 24rpx;
            margin-left: auto;
        }
    }
</style>
